<template>
    <div class='list_ytj'>
        <div class='titles2'>
            {{titles}}
        </div>
        <div class='content'>
            <div style='padding:0'>
                 <div v-for="(item,index) in data" :key="index" @click="openWin(item)"  class='trs' :style="{'background-color':item.bgcolor}">
                    
                    <div v-for="(item2,index2) in list" :key="index2" class='td' :style="{'width':item2.width}">{{item2.names}}：{{item[item2.field]}}</div>
                </div>
            </div>
            
        </div>
        <div class='page_bar'>
            
            
            <span class='page_text'>共{{totalSize}}条数据</span>
            <div class='page_bar3'>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="limit"
                    :current-page="page"
                    @current-change="handleCurrentPageChange"
                    :total="totalSize">
                </el-pagination>
            </div>
        </div>
        <div class='bottoms'>
            <div class='search_item_main'>
                <div v-for="(item,index) in searchStr" :key="index" class='search_item'  v-if="item.searchType!='hidden'">
                    <input type='text' :placeholder="item.text" v-model="item.val"/>
                </div>
            </div>
            <div class='search_btn'>
                <img :src="searchBtn" @click="loadTable"/>
            </div>
            
        </div>


    </div>
</template>
<script>
export default {
    data(){
        return{
            page:"1",
            titles:"",
            returnImg:"",
            searchImg:"",
            sCode:"",
            appid:"",
            filename:"",
            list:[],
            data:[],
            title:"",
            title2:"",
            limit:"8",
            company:"",
            ver:"",
            url:"",
            totalSize:"0",
            pageSize:"",
            searchStr:[],
            searchBtn:"",
            dbModelKey:"",
            
            exId:""
        }
    },
    created(){
        this.sCode=localStorage.getItem("sCode");
        this.titles= this.$route.query.title;
        this.appid= this.$route.query.appid;
        this.filename= this.$route.query.filename;
        this.filename=this.filename.replace("一体机平台","移动端平台");
        this.dbModelKey= this.$route.query.dbModelKey;
        this.returnImg=localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/return.png";
        this.searchBtn=localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/searchBtn.png";
        this.searchImg="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/search2.png')";
        if(this.$route.query.exId){
            this.exId=this.$route.query.exId;
        } 

        
        var html =document.querySelector('html');
        html.style.fontSize = document.documentElement.clientWidth/10+'px';
        let sef=this;
         this.loadData();
         //window.setTimeout(function(){
             document.getElementsByClassName("list_ytj")[0].style.backgroundImage="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+sef.sCode+"/mobile2.jpg')"
       // },1000)
       
    },
    mounted(){
        let sef=this;
       // window.setTimeout(function(){
             document.getElementsByClassName("list_ytj")[0].style.backgroundImage="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+sef.sCode+"/mobile2.jpg')"
       // },1000)
    },
    methods:{
        getSearchData(){
            let data={};
            let dataEx={};
            console.log(this.searchStr)
            for(let i=0;i<this.searchStr.length;i++){
                let searchId=this.searchStr[i].searchId;
                console.log("searchId====================="+searchId);
                let val=this.searchStr[i].val;
                if(!val)
                    val="";
                console.log("val====================="+val+"="+this.searchStr[i].field);
                if(this.searchStr[i].searchType!="hidden")
                    data[searchId]=val;
                else
                     data[searchId]=this.searchStr[i].vals;
                let _data={};
                _data.field=this.searchStr[i].field;
                _data.searchType=this.searchStr[i].searchType;
                _data.searchOper=this.searchStr[i].searchOper;
                dataEx[searchId]=_data;

            }
            data.page=this.page;
            data["listname"]=this.filename;
            data['dataEx']=JSON.stringify(dataEx);
            
            data['data']=JSON.stringify(data);
            return data;
        },
        loadData(){
            let sef=this;
            this.$post(this.appid,'api/view/commonListJson',{
                appid:this.appid,
                listname:escape(this.filename)
            }).then(data=>{
               
                sef.list=data[0].list;
                sef.showTable=true;
            
                sef.title=data[0].title;
                sef.title2=data[0].title2;
                    sef.company=data[0].companys;
                sef.searchStr=data[0].searchStr;
                sef.ver=data[0].ver;
                if(sef.ver){
                    if(localStorage.getItem("ver")!=sef.ver){
                        localStorage.setItem("ver",sef.ver);
                        location.reload();
                    }
                }
                
                this.url=data[0].url;

            
                
                  sef.loadTable();
                
                
                sef.loading=false;
                
            })
        },
        loadTable(){
             let data=this.getSearchData();
             data.appid=this.appid;
             data.page=this.page;
             data.listname=escape(this.filename);
             data.limit=this.limit;
             data.exId=this.exId;
             console.log("loadTable=========================");
             console.log(data);
             this.$post(this.appid,this.url,data).then(data=>{
                this.data=data.data;
                this.totalSize=data.count;
              
              
            });
        },
        returns(){
            this.$router.go(-1);
        },
        openWin(items){
             if(this.dbModelKey){
                  this.$post("api","api/view/getDbUrl",{key:escape(this.dbModelKey)}).then(data=>{
                    let name=data.name;
                    let sId=items[data.fieldKey];
                    let url=data.url;
                    let field=data.field;
                    let filename=data.filename;
                    let param="sId="+sId+"&appid="+this.appid+"&filename2="+filename+"&filename="+filename+"&fieldPath="+field;
                    url=url.indexOf("?")==-1 ? url+"?"+param:url+"&"+param;
                    let item={};
                    item.buttonName=name;
                    item.url=url;
                    item.sId=sId;
                    item.appid=this.appid;
                    item.filename2=filename;
                    item.fieldPath=field;

                    console.log("items===s=s===");
                    console.log(item)
                    item.url=item.url.replace("[exId]",sId);
                     this.$router.push({path:item.url,query:{filename2:item.filename2,title:name,appid:item.appid}});
                    //this.openWin(JSON.stringify(item))
                })
             }
            
        },
       
        handleCurrentPageChange(val){
         
            this.page=""+val;
            this.loadTable()
            
        },
    }
}
</script>
<style scoped>
.list_ytj{
    width:100%;
    height:100%;
    
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display:flex;
    flex-direction: column;
    align-items:center;
}
.titles2{
    height:10%;
    text-align:center;
    width:100%;
    color:#fff;
    font-size:0.6rem;
    font-family: PingFangSC-Regular, PingFang SC;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    font-family:"经典圆体繁", "microsoft yahei", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;
    
    
    font-weight: bold;
    letter-spacing: 4px;
    text-align: center;
    
}
.returnImg{
    position: absolute;
    right:5%;
    top:5%;
    width:1rem;
    cursor:pointer;
}
.content{
    flex:1;
    width:90%;
    border-radius: 15px;
    overflow-y:auto;
    background:rgba(11, 38, 101, 0.5);
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.content::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.bottoms{
    height:10%;
}
.page_bar{
    height:60px;
    line-height: 40px;
    color:#cad5fe;
    text-align:left;
    width:90%;
    font-size:0.1rem;
    display:flex;
    flex-direction: row;
}
.page_bar3{
    flex:1;
    text-align:right;
    padding-top:10px;
}
.page_text{
    width:200px;
    font-size:0.31rem
}
.th{
    color:#8499e8;
    padding:20px;
    font-size:0;
    border-bottom:1px solid #192857;
}
.td{
    color:#cad5fe;
    font-size:0.12rem;
    display:inline-block;
    padding:5px;
    font-size:0.36rem;
    
}
.el-pagination.is-background .el-pager li:not(.disabled).active{

    background-color:#1e41a4 !important;
}
.bottoms{
    width:95%;
    display:flex;
    flex-direction: row;
    justify-self: start;
    align-items:center;
}
.search_item_main{
    position: relative;
    flex:1;
    display:flex;
    flex-direction: row;
    justify-self: start;
    align-items:flex-start;
    
}

.search_btn img{
    width:3.2rem;
    cursor:pointer;
    vertical-align: middle;
}
.search_item{
    height:40px;
    position: relative;
    width:130px;
    margin-left:20px;
    width:80%;
}

input:focus{
    outline: none;
}
.search_item input{
    height:32px;
    border-radius: 15px;
    border:0;
    background-color:#1e41a4;
    width:100%;
    color:#fff;
    line-height:30px;
    font-size:0.36rem;
    padding:5px;
    outline: none;   
    position: absolute;
    padding-left:15px;
    
}

/* 通用 */
::-webkit-input-placeholder { color:#8499e8; }
::-moz-placeholder { color:#8499e8; } /* firefox 19+ */
:-ms-input-placeholder { color:#8499e8; } /* ie */
input:-moz-placeholder { color:#8499e8; }

/* webkit专用 */
#field2::-webkit-input-placeholder { color:#8499e8; }
#field3::-webkit-input-placeholder { color:#8499e8; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#8499e8; }

/* mozilla专用 */
#field2::-moz-placeholder { color:#8499e8; }
#field3::-moz-placeholder { color:#8499e8; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#8499e8; }
</style>
<style >
.page_bar3 li{

    height:0.6rem !important;
    width:0.6rem !important;
    line-height:0.6rem !important;
    background-color:#1e41a4 !important;
}
.page_bar3 button{

    height:0.6rem !important;
    width:0.6rem !important;
    line-height:0.6rem !important;
}
.trs{
    cursor:pointer;
    list-style-type :none;
    margin-bottom:10px;
    background-color:#1e41a4;
    font-size:0;
    padding:5px;
    border-radius: 5px;

}
.trs:hover{
    background:#1e41a4;
}
</style>